@charset "utf-8";
@import "reset";
#app{
  padding-top: vw(304);
}
.head{
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  .content{
    width: 100%;
    height: vw(200);
    background-color: skyblue;
    display: flex;
    justify-content: space-between;
    padding: 0 vw(20);
    position: relative;
    .imgBox{
      width: vw(62);
      height: vw(62);
      border-radius: 50%;
      overflow: hidden;
      position: absolute;
      top: 50%;
      margin-top: vw(-28);
      cursor: pointer; 
    }
    .textBox{
      margin-left: vw(80);
      font-weight:900 ;
      font-size: vw(50);
      line-height: vw(200);
      text-align: center;
      color: white;
    }
    .buttonBox 
    {
      margin-top: vw(65);
      button{
        width:vw(200);
        font-size: vw(32);
        line-height: vw(72);
        border-radius: vw(30);
        background-color: white;
        color: goldenrod;
        font-weight: bold;
        text-align: center;
      }
    }
  }
  #nav{
    width: 100%;
    height: vw(100);
    line-height: vw(110);
    border-bottom:1px solid #ccc;
    background-color: white;
    font-size: vw(34);
    .router-link-exact-active{
      color: red;
      border-bottom: 2px solid red;
    }
    a{
      display: inline-block;
      height: vw(100);
      text-align: center;
      color: #615d5d;
      margin:0 vw(65)
    }
  }
}
.box{
  display: none;
  background-color: white;
  border-top: 1px solid rgb(180, 176, 176);
  width: 100%;
  height: vw(110);
  position: fixed;
  bottom: vw(0);
  padding: vw(15) 0 0 vw(20);
  z-index: 10;
  .iconfont{
    position: absolute;
    top: vw(20);
    right: vw(20);
    font-size: vw(60);
  }
  .start{
    display: none;
  }
  .left{
    display: flex;
    .back-pic{
      width: vw(80);
      height: vw(80);
      border-radius: 50%;
      border: 1px solid black;
      margin-right: vw(25);
      overflow: hidden;
      img{
        width: 100%;
      }
    }
    .songMassege{
      h3{
        font-size: vw(28);
        margin-top: vw(3);
        width: vw(500);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .little-box{
        width: vw(500);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        h4{
          font-size: vw(20);
          color: rgb(155, 150, 150);
          margin-top: vw(3);
          margin-left: vw(10);
          display: inline-block;
        }
        h4:first-of-type{
          margin-left: vw(30);
        }
      }
    }
  }
}
.play-page{
  transform: translateY(-100vh);
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 100vh;
  transition: all 0.5s;
}